<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive,  Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Login form :: Metro UI CSS </title>
    {% load staticfiles %}
    <link href="{% static 'metro/css/metro.min.css' %}" rel="stylesheet">
    <link href="{% static 'metro/css/metro-responsive.min.css' %}" rel="stylesheet">
    <link href="{% static 'metro/css/metro-icons.min.css' %}" rel="stylesheet">
    <style type="text/css">
        .login-form {
            width: 25rem;
            height: 18.75rem;
            position: fixed;
            top: 50%;
            margin-top: -9.375rem;
            left: 50%;
            margin-left: -12.5rem;
            background-color: #ffffff;
            opacity:0;
            -webkit-transform: scale(.8);
            transform: scale(.8);
        }
    </style>
</head>
<body class="bg-darkTeal">
    <div class="login-form padding20 block-shadow">
        <form action="{% url 'account-login' %}" method="post">
            <h1 class="text-light">Login to service</h1>
            <hr class="thin" />
            <br />
            <div class="input-control text full-size" data-role="input">
                <label for="user_login">User email:</label>
                <input type="text" name="user_login" id="user_login">
                <button class="button helper-button clear"><span class="mif-cross"></span></button>
            </div>
            <br />
            <br />
            <div class="input-control password full-size" data-role="input">
                <label for="user_password">User password:</label>
                <input type="password" name="user_password" id="user_password">
                <button class="button helper-button reveal"><span class="mif-looks"></span></button>
            </div>
            <br />
            <br />
            <div class="form-actions">
                <button type="submit" class="button primary">Login to...</button>
                <button type="button" class="button link">Cancel</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'metro/js/metro.min.js' %}"></script>
    <script type="text/javascript" charset="utf-8" async defer>
         $(function(){
            "user strict";
            var form = $(".login-form");
            form.css({
                opacity: 1,
                "-webkit-transform": "scale(1)",
                "transform": "scale(1)",
                "-webkit-transition": ".5s",
                "transition": ".5s"
            });
        });
    </script>
</body>
</html>
